﻿@page
@{
    Layout =null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="~/sx.ico" />
    <link href="~/themes/layui/css/layui.css" rel="stylesheet" />
    <link href="~/sys/css/login.css" rel="stylesheet" />
</head>
<body>
    @*动画特效*@
    <div id="starsBox"></div>
    <div class="layui-container">
        <div class="admin-login-background">
            <div class="layui-form login-form">
                <form class="layui-form" action="">
                    <div class="layui-form-item logo-title">
                        <h1>SX后台管理系统</h1>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-icon layui-icon-username" for="username"></label>
                        <input type="text" id="username" lay-verify="required|account" placeholder="用户名" autocomplete="off" class="layui-input" value="@ViewBag.UserName">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-icon layui-icon-password" for="password"></label>
                        <input type="password" id="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="@ViewBag.Password">
                    </div>
                    @*隐藏域 verifycodeid*@
                    <div class="layui-form-item" style="display:none">
                        <label class="layui-icon layui-icon-password" for="password"></label>
                        <input type="text" id="verifycodeid" placeholder="" autocomplete="off" class="layui-input" value="">
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                        <div class="code">
                            <input id="captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha">
                            <img id="canvas" src="" style="width:100px;height:38px;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <span>
                            <input type="checkbox" name="remember_user" id="remember_user" lay-skin="primary" style="vertical-align:middle;" value="true">
                            <span style="color:#FFFFCE;vertical-align:middle;">记住密码</span>
                        </span>
                    </div>

                    <div class="layui-form-item">
                        <div class="login_tips"></div>
                        <button id="login_button" class="layui-btn layui-btn-fluid" style="background-color:#FFFFCE;color:orange" lay-submit="" lay-filter="login">登 入</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="~/sys/js/jquery-3.4.1.min.js"></script>
    <script src="~/sys/js/jquery.cookie.js"></script>
    <script src="~/themes/layui/layui.js"></script>
    <script src="~/sys/js/login.js"></script>
    <script>
        (function ($) {
            var length =6;
            draw(length);
            $.login = {
                formMessage: function (msg) {
                    $('.login_tips').find('.tips_msg').remove();
                    $('.login_tips').append('<div class="tips_msg"><i class="fa fa-question-circle"></i>' + msg + '</div>');
                },
                init: function () {
                    $("#canvas").click(function () {
                        draw(length);
                    });
                },
                //如果已经登录就直接跳转到首页
                checkLogin: function () {
                    $.ajax({
                        url: "/api/admin/auth/CheckLoginState?v=" + new Date(),
                        type: "post",
                        dataType: "json",
                        contentType: 'application/json',
                        headers: {
                            "Authorization": "Bearer " + localStorage.getItem('access_token'),
                        },
                        success: function (data) {
                            if (data.code == 1) {
                                 window.location.href = '/admin/index';
                            }
                        }
                    });
                }
            };
            $(function () {
                $.login.init();
                $.login.checkLogin();
                draw(length);
                if ($.cookie("remember_user")) {
                    $("#remember_user").prop("checked", true);
                    $("#username").val($.cookie("username"));
                    $("#password").val($.cookie("password"));
                }
            });
            function saveUserInfo() {
                if ($("#remember_user").prop("checked") == true) {
                    var user_name = $("#username").val();
                    var user_password = $("#password").val();
                    $.cookie("remember_user", "true", {
                        expires: 7
                    }); // 存储一个带7天期限的 cookie
                    $.cookie("username", user_name, {
                        expires: 7
                    }); // 存储一个带7天期限的 cookie
                    $.cookie("password", user_password, {
                        expires: 7
                    }); // 存储一个带7天期限的 cookie
                } else {
                    $.cookie("remember_user", "false", {
                        expires: -1
                    }); // 删除 cookie
                    $.cookie("username", '', {
                        expires: -1
                    });
                    $.cookie("password", '', {
                        expires: -1
                    });
                }
            }
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                // 登录过期的时候，跳出ifram框架
                if (top.location != self.location) top.location = self.location;

                // 进行登录操作
                form.on('submit(login)', function (data) {
                    saveUserInfo();
                    data = data.field;
                    $("#login_button").empty();
                    $("#login_button").attr('disabled', 'disabled').html("loading...");

                    $.ajax({
                        url: "/api/admin/auth/login",
                        data: JSON.stringify({ username: $.trim($('#username').val()), password: $.trim($('#password').val()), verifycode: $.trim($('#captcha').val()), verifycodeid: $.trim($('#verifycodeid').val()) }),
                        type: "post",
                        dataType: "json",
                        contentType: 'application/json',
                        success: function (res) {
                            if (res.code == 1) {

                                localStorage.setItem("access_token", res.data.accessToken);
                                localStorage.setItem("expiresMinute", res.data.expiresMinute);
                                localStorage.setItem("refresh_token", res.data.refreshToken);
                                localStorage.setItem("last_token_time", new Date().getTime());
                                $("#login_button").empty();
                                $("#login_button").html("登录成功，正在跳转...");
                                window.location.href = '@Url.Content("~/admin/index")';

                            } else {

                                $("#login_button").empty();
                                $("#login_button").removeAttr('disabled').html("登 入");
                                draw(length);
                                layer.msg(res.msg);
                                //$.login.formMessage(res.msg);
                            }
                        },
                        error: function () {
                            $("#login_button").empty();
                            $("#login_button").removeAttr('disabled').html("登 入");
                            draw(length);
                            layer.msg("系统未知错误,请重新登录");
                        }

                    });

                    return false;
                });
            });
        })(jQuery);
    </script>
</body>
</html>

